<template>
    <div class="pop-autograph">
        <el-dialog
            title="签名"
            :visible.sync="dialogVisible"
            width="80%"
            @close="handleClose"
        >
            <div class="signatureBox">
                <canvas
                    v-if="!imageShow"
                    :src="imageUrl"
                    class="my-canvas-cls"
                    canvas-id="mycanvas"
                    @touchstart="touchstart"
                    @touchmove="touchmove"
                    @touchend="touchend"
                ></canvas>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="clear" type="danger">清 除</el-button>
                <el-button type="primary" @click="finish">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import uploadPic from "@/js/upload/UploadPic.js";

export default {
    props: [],
    components: {},
    computed: {},
    data() {
        return {
            dialogVisible: false,
            //绘图图像
            ctx: "",
            //路径点集合
            points: [],
            imageUrl: "", //签名图片
            imageShow: false, //是否显示签名完成的图片
        };
    },
    created() {},
    mounted() {},
    methods: {
        initData() {
            this.dialogVisible = true;
            setTimeout(() => {
                this.createCanvas();
            }, 200);
        },
        handleClose() {
            this.$emit("handleClose");
            this.close();
        },

        //关闭并清空画布
        close() {
            this.createCanvas();
            this.clear();
        },
        //创建并显示画布
        createCanvas() {
            this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象
            //设置画笔样式
            this.ctx.lineWidth = 4;
            this.ctx.lineCap = "round";
            this.ctx.lineJoin = "round";
        },
        //触摸开始，获取到起点
        touchstart(e) {
            // this.imageShow = false;
            let startX = e.changedTouches[0].x;
            let startY = e.changedTouches[0].y;
            let startPoint = {
                X: startX,
                Y: startY,
            };
            this.points.push(startPoint);
            //每次触摸开始，开启新的路径
            this.ctx.beginPath();
        },
        //触摸移动，获取到路径点
        touchmove(e) {
            let moveX = e.changedTouches[0].x;
            let moveY = e.changedTouches[0].y;
            let movePoint = {
                X: moveX,
                Y: moveY,
            };
            this.points.push(movePoint); //存点
            let len = this.points.length;
            if (len >= 2) {
                this.draw(); //绘制路径
            }
        },
        // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
        touchend() {
            this.points = [];
        },
        //绘制笔迹
        draw() {
            let point1 = this.points[0];
            let point2 = this.points[1];
            this.points.shift();
            this.ctx.moveTo(point1.X, point1.Y);
            this.ctx.lineTo(point2.X, point2.Y);
            this.ctx.stroke();
            this.ctx.draw(true);
        },
        //清空画布
        clear() {
            let that = this;
            if (this.imageShow) {
                if (this.imageUrl) {
                    this.imageUrl = "";
                    this.imageShow = false;
                }
            } else {
                uni.getSystemInfo({
                    success: function (res) {
                        console.log("res=======>", res);
                        // 设置画笔样式
                        let canvasw = res.windowWidth;
                        let canvash = res.windowHeight;
                        that.ctx.clearRect(0, 0, canvasw, canvash);
                        that.ctx.draw(true);
                    },
                });
            }
            this.createCanvas();
        },
        //完成绘画并保存到本地
        finish() {
            let that = this;
            uni.canvasToTempFilePath({
                canvasId: "mycanvas",
                success: function (res) {
                    that.imageUrl = res.tempFilePath;
                    uploadPic.creatCanvas(res.tempFilePath, false, successBack);
                },
            });
            function successBack(data) {
                that.dialogVisible = false;
                const obj = {
                    url: data.url,
                    urls: data.name,
                };
                that.$emit("autFinish", obj);
            }
        },
    },
};
</script>

<style lang="scss" scoped >
.signatureBox {
    width: 100%;
    height: 400px;
}
::v-deep .uni-scroll-view {
    overflow: inherit !important;
}
.bigbox {
    touch-action: none;
}
.my-canvas-cls {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    background: #f6f6f6;
}

.footer-class {
    font-size: 14px;
    height: 150upx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left: 40rpx;
}

.but-class {
    margin-right: 40rpx;
}
</style>
